@import "_mixins.scss";
@import "reset.scss";

$slideNumber:5;

//解决向下滑动时，滚动导致位置不正确的问题
html {
	overflow: hidden;
}

.weixin-slider{
	//width:100%;
	//overflow:hidden;
	
	.weixin-slides{
		position: absolute;
		height: 100%;
		width: 100%;

		.weixin-slider-list{
			height:100%;
			width: 100%;

			a{
				display:block;
				width: 100%;
    			height: 100%;
				@extend %clearfix;
			}

			.weixin-slider-item{
				position: relative;
				width: 100%;
				height: 100%;

				.weixin-item-content{
					position:absolute;
					width: 100%;
					height: 100%;
					left:0px;
					top:0px;

					h3.title{
						font-weight: bold;
						text-align:left;
						font-size: pxToRem(96px);
						line-height: pxToRem(115px);
						margin: pxToRem(86px) 0 0 pxToRem(70px);
					}
					.line2{
						font-size: pxToRem(24px);
						line-height: pxToRem(36px);
						text-align:left;
						margin: pxToRem(24px) 0 0 pxToRem(70px);
					}
					
					.black-button{
						background: #1A1A1A;
						color:#ffffff;
					}
						
					.white-button{
						background: #ffffff;
						color:#1A1A1A;
					}
					
					.info-link{
						height:pxToRem(48px);
						width:pxToRem(112px);
						border-radius: pxToRem(2px);
						text-align:center;
						cursor:pointer;
						margin: pxToRem(36px) 0 0 pxToRem(70px);

						&:hover{
							opacity:0.85;
						}
						
					}
					
					.knowMore{
						font-size:pxToRem(18px);
						line-height:pxToRem(48px);
						
					}
						
					.white-ground {
						color:#1A1A1A;
					}
						
					.black-ground {
						color:#ffffff;
					}
				}
			}
		}
	}
	
	.weixin-slider-btn{
		position: fixed;
		height:pxToRem(200px);
		width:pxToRem(200px);
		bottom:0%;
		left: 50%;
		margin-left: pxToRem(-100px);
		z-index: 2;
	}

	.weixin-slider-down{
		position: fixed;
		height:pxToRem(60px);
		width:pxToRem(102px);
		background:url(../images/down.png) center no-repeat;
		background-size: 100% 100%;
		animation:downEff 1s infinite steps(4, end);
		bottom:5%;
		left: 50%;
		margin-left: pxToRem(-51px);
	}
	
	.weixin-slider-ctrl {
        position: fixed;
        right: pxToRem(30px);
		top:50%;
		
		span {
			box-sizing: border-box;
			margin-bottom: 16px;
			width: 10px;
			height: 10px;
			border: 1px solid #ababab;
			border-radius: 6px;
			background-color: #ababab;
			cursor: pointer;
			display: block;
		}
		
		.active {
			background-color: #ffffff;
			border:1px solid #ababab;
		}
    }
}

@keyframes downEff {
	0%{
		opacity:0.1;
		bottom:10%;
		height:pxToRem(20px);
		width:pxToRem(34px);
		margin-left: pxToRem(-17px);
	}
	100%{
		opacity:1;
		bottom:0%;
		height:pxToRem(60px);
		width:pxToRem(102px);
		margin-left: pxToRem(-51px);
	}
}